<template>
  <div class="news">
    <van-card
      v-for="el in list"
      :key="el.id"
      :thumb="el.img_url"
      @click="goDetail('/home/detail',el.id)"
    >
      <template slot="title">
        <div class="van-ellipsis">
          {{el.title}}
        </div>
      </template>
      <template slot="price">
        <span class="msgOne">{{el.add_time}}</span>
      </template>
      <template slot="num">
        <h4 class="msgTwo">浏览{{el.click}}</h4>
      </template>
    </van-card>
  </div>
</template>
<script>
import { news } from '../../../api/home'
export default {
  data: () => ({
    list: []
  }),
  created() {
    this.getnews()
  },
  methods: {
    async getnews() {
      const res = await news()
      this.list = res.data.message
    }
    // getdetail(id) {
    //   this.$router.push('/home/detail/' + id)
    // }
  }
}
</script>
<style lang="less" scoped>
.news {
  .msgOne {
    position: relative;
    top: 30px;
    font-family: "楷体";
    color: rgb(127, 63, 187);
    font-size: 18px;
  }
  .msgTwo {
    position: relative;
    bottom: -25px;
  }
  .van-ellipsis {
    font-family: "楷体";
    font-size: 16px;
    color: orange;
  }
  // .van-card__title {
  //   /* 一行显示*/
  //   -webkit-line-clamp: 1;
  //   /* 将对象作为弹性伸缩盒子模型显示 */
  //   display: -webkit-box;
  //   /*子元素的排列方式 */
  //   -webkit-box-orient: vertical;
  //   text-overflow: ellipsis;
  //   overflow: hidden;
  //   word-break: break-all;
  // }
}
</style>